<template>
  <div class="product_attr">
    <el-form
      ref="EditForm"
      :model="editModel"
      label-width="120px"
      :rules="validate"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="属性名称:" prop="name">
            <el-input
              v-model="editModel.name"
              placeholder="属性分组名称"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品分类:" prop="categoryId">
            <el-tree-select
              ref="treeSelect"
              v-model="editModel.categoryId"
              :styles="styles"
              :select-params="selectParams"
              :tree-params="treeParams"
              @searchFun="_searchFun"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="icon:" prop="icon">
            <el-upload
              class="upload-demo"
              drag
              :data="OSSParameter"
              :action="ossAction"
              :show-file-list="true"
              :multiple="false"
              list-type="picture"
              :on-success="onSuccess"
              :file-list="getFileList"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg、png、jpeg文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否显示:" prop="enable">
            <el-radio-group v-model="editModel.enable">
              <el-radio v-for="(name,value,index) of getSystemDictionariesByType('WHETHER')" :key="index" :label="value" border>{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="属性类型:" prop="attrType">
            <el-radio-group v-model="editModel.attrType">
              <el-radio v-for="(name,value,index) of getSystemDictionariesByType('ATTRTYPE')" :key="index" :label="value" border>{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否需要检索:" prop="searchType">
            <el-radio-group v-model="editModel.searchType">
              <el-radio v-for="(name,value,index) of getSystemDictionariesByType('WHETHER')" :key="index" :label="value" border>{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="展示在介绍上:" prop="showDesc">
            <el-radio-group v-model="editModel.showDesc">
              <el-radio v-for="(name,value,index) of getSystemDictionariesByType('WHETHER')" :key="index" :label="value" border>{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="可选值" prop="valueSelect">
            <el-select
              v-model="editModel.valueSelect"
              multiple
              style="width: 100%;"
              filterable
              allow-create
              default-first-option
              placeholder="可选值"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { listToTree } from 'tree-walk-util'
import { mapGetters } from 'vuex'
import { findAllCategoryREQ } from '@/api/product/category'
import { v4 as uuidv4 } from 'uuid'
import { ossAction } from '@/settings'
import { getAttrIconOSSPolicyREQ } from '@/api/third-party/oss'
export default {
  name: 'EditForm',
  components: {},
  props: {
    editModel: {
      type: Object
    },
    validate: {
      type: Object
    }
  },
  data() {
    return {
      styles: {
        width: '100%'
      },
      selectParams: {
        multiple: false,
        clearable: true,
        placeholder: '请输入内容'
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        'highlight-current': true,
        'check-strictly': true,
        'default-expand-all': true,
        'expand-on-click-node': false,
        data: [],
        props: {
          children: 'children',
          label: 'text',
          disabled: 'status',
          value: 'value'
        }
      },
      ossAction: ossAction,
      fileType: ['IMAGE/JPEG', 'IMAGE/PNG', 'IMAGE/JPG'],
      fileSize: 512000, // 1 * 1024 * 1024 = 1M
      OSSParameter: { }
    }
  },
  computed: {
    ...mapGetters({
      'getSystemDictionariesByType': 'dictionaries/getSystemDictionariesByType'
    }),
    getFileList() {
      if (!this.editModel.icon) {
        return []
      }
      return [{ name: this.editModel.name, url: this.editModel.icon }]
    }
  },
  mounted() {
    findAllCategoryREQ().then((data) => {
      if (this.editModel.id && data && data.length > 0) {
        const temp = data.find(v => {
          return v.value === this.editModel.id
        })
        if (temp) temp.disabled = 'true'
      }
      const tempData = listToTree(data, 'value', 'parentId', 'children').children
      this.$refs.treeSelect.treeDataUpdateFun(tempData)
    })
  },
  methods: {
    _searchFun(value) {
      this.$refs.treeSelect.filterFun(value)
    },
    onSuccess(response,) {
      this.editModel.icon = this.ossAction + '/' + this.OSSParameter['key']
    },
    beforeUpload(file) {
      if (!file.type) {
        this.$message.error('logo图片上传失败:获取图片格式失败')
        return false
      }
      const fileType = file.type.toLocaleUpperCase()
      if (!this.fileType.includes(fileType)) {
        this.$message.error('logo图片上传失败:只能是 JPG、PNG、JPEG 格式!')
        return false
      }
      if (file.size > this.fileSize) {
        this.$message.error('logo图片上传失败:logo图片大小不能超过 500KB!')
        return false
      }
      return new Promise((resolve, reject) => {
        getAttrIconOSSPolicyREQ().then(({ accessId, dir, expire, host, policy, signature }) => {
          this.OSSParameter['OSSAccessKeyId'] = accessId
          this.OSSParameter['policy'] = policy
          this.OSSParameter['Signature'] = signature
          this.OSSParameter['key'] = dir + '/' + uuidv4() + '_filename_' + file.name
          this.OSSParameter['host'] = host
          this.OSSParameter['success_action_status'] = 200
          resolve(true)
        }).catch((eror) => {
          console.log(eror)
          reject(false)
        })
      })
    }
  }

}
</script>
<style lang='scss' scoped>
.product_attr {
  /deep/ .upload-demo {
    .el-upload-dragger,.el-upload {
      width: 100%;
    }
  }
}
</style>
